<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
				<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			html,body{
				height: 100%;
				width: 100%;
			}
			canvas{
				display: block;
			}
		</style>
		<script>
		
			var canvas ;
			var context;
			var video;
				
			$(document).ready(function(){
				video = $("#myVideo");
				canvas = $("#myCanvas");
				context = canvas.get(0).getContext("2d");
				
				$("#play").click(function(){
					video.get(0).play();
				});
				
				$("#stop").click(function(){
					video.get(0).pause();
				});
				
				
				video.bind("play", function() {
					drawCanvas();
				})
			});
			
			function drawCanvas(){
				if(video.get(0).paused || video.get(0).ended){
					return false;
				} 
				context.drawImage(video.get(0), 0, 0, 500, 281);
					
				var imageData = context.getImageData(0, 0, canvas.width(), canvas.height());
				var pixels = imageData.data;
				
				context.clearRect(0, 0, canvas.width(), canvas.height());
				
				var numTileRows = 36;
				var numTileCols = 64;
				
				var tileWidth = imageData.width/numTileCols;
				var tileHeight = imageData.height / numTileRows;
					
				for(var r=0; r<numTileRows; r++){
					for(var c=0; c<numTileCols; c++){
						var x = (c*tileWidth)+ (tileWidth/2);
						var y = (r*tileHeight)+(tileHeight/2);
						
						var pos = (Math.floor(y)*imageData.width*4)+ (Math.floor(x)*4);
						
						var red = pixels[pos];
						var green = pixels[pos+1];
						var blue = pixels[pos+2];
						
						context.fillStyle = "rgb("+red+","+green+","+blue+")";
						context.fillRect(x-(tileWidth/2), y-(tileHeight/2), tileWidth, tileHeight);
//						context.beginPath();
//						context.arc(x, y, tileWidth/2, 0, Math.PI*2, false);
//						context.closePath();
//						context.fill();
					}
				}
				
				setTimeout(drawCanvas,30);
			}
		</script>
	</head>
	<body>
	<canvas id="myCanvas" width="500" height="281">
		<video id="myVideo" width="500" height="281" controls>
			<source src="video/movie.mp4" type="video/mp4"></source>
			<source src="video/movie.ogg" type="audio/ogg"></source>
			<source src="video/movie2.mp4" type="video/mpeg"></source>
		</video>
	</canvas>
		<div>
			<button id="play">Play</button>
			<button id="stop">Stop</button>
		</div>
	</body>
</html>
